import { useRef } from 'react'
import Child from '../components/child';

function Home() {
    let ChildRef = useRef();
    return <div>
        <h3>获取组件实例---</h3>
        <Child ref={ChildRef}></Child>

        <button onClick={() => {
            console.log(ChildRef.current);
            // 获取子组件暴露的属性
            console.log(ChildRef.current.num);
            // 调用子组件暴露的方法
            ChildRef.current.init();
            
        }}>获取组件实例</button>
    </div>
}

/* 
总结：  1. 若父组件想要获取子组件中的状态或方法 子组件需要先使用forwordRef 修饰
        2. 在子组件种使用 useImperativeHandler hooks 将子组件要暴露的属性返回
        3. 在父组件中使用 ref.current.属性名获取
*/
export default Home